<template>
  <div class="container">
    <div class="app-container">
      <!-- 展示树形结构 -->
      <!-- 传智教育 default-expand-all 默认展开所有子节点-->
      <el-tree default-expand-all :data="depts" :props="defaultProps" :expand-on-click-node="false">
        <!-- 节点结构 -->
        <!-- v-slot= "{node,data}" 作用域插槽数据 v-slot 作用于el-tree  实现部门列表 直接解析data，只能作用于template-->
        <template v-slot="{ data }">
          <!-- 以下为一行两列 -->
          <el-row style="width: 100%" type="flex" justify="space-betwen" align="middle">
          <el-col>{{ data.name }}</el-col>
          <el-col :span="4">
            <!-- span行内划分区域 -->
            <span style="width: 82px;" class="tree-manager">{{ data.managerName }}</span>
            <!-- 先放一个管理员 在做以恶搞下拉的操作 ,command 属性用来监听事件 -->
            <!-- $event : 表示实参，就是下边的add,edit,del等等,使用command 绑定事件-->
            <el-dropdown @command="operateDept($event, data.id)">
                <!-- 显示区域内容 -->
              <span class="el-dropdown-link"> 操作<i class="el-icon-arrow-down el-icon--right"></i></span>
              <!-- 下拉菜单的选项 -->
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                <el-dropdown-item command="del">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
        </template>
      </el-tree>
    </div>
    <!-- 放置弹层组件,通过:将组件和本vue参数结合，绑定一个属性currentNodeId .sync 标识父组件可以接受子组件的值，自动监听 update: showDialog,@updateDepartment监听到更新父组件，就是重新拉取数据 -->
    <add-dept  @updataDepartment="getDepartment" :currentNodeId="currentNodeId" :showDialog.sync="showDialog"/>
  </div>
</template>
<script>
import { getDepartment } from '@/api/department'
import { transListToTreeData } from '@/utils'
import AddDept from './components/add-dept'
export default {
  name: "Department",
  components: { AddDept }, // 完成了组件局部注册
  // data 直接解析这个data
  data() {
    return {
      showDialog: false,
      currentNodeId: null,
      // 即使下边有这个，上边也会直接渲染
      depts: [
        // {
        //   name: "传智教育",
        //   managerName: '管理员',
        //   children: [
        //     { name: "总裁办", managerName: '张三' },
        //     { name: "行政部", managerName: '李四' },
        //     {
        //       name: "人事部",
        //       managerName: '李四',
        //       children: [
        //         { name: "财务管理部", managerName: '张三' },
        //         { name: "税务管理部", managerName: '张三' },
        //         { name: "薪酬管理部", managerName: '张三' },
        //       ],
        //     },
        //   ],
        // },
      ], // 默认一个初始数组
      defaultProps: {
        label: "name",
        children: "children",
      },
    };
  },
  created() {
    this.getDepartment();// 初始化调用获取数据接口
  },
  methods: {
    async getDepartment() { // 获取数据接口
      const result = await getDepartment();
      this.depts = transListToTreeData(result, 0);
    },
    // 操作部门事件
    operateDept(type, id) {
      if (type === 'add') {
        this.showDialog = true;
        this.currentNodeId = id;
      }
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 30px 140px;
  font-size: 14px;
}
.tree-manager {
  width: 50px;
  display: inline-block;
  margin: 10px
}
</style>
